{% extends 'base.html.twig' %}

{% block stylesheets %}
<style>
    #body {
        background: transparent url('{{ imgsrc("images/friend.jpg") }}?v=2') no-repeat top center;
        background-size: cover;
    }
    .yuanbao { width: 100%; }
    .title { 
        color: #fad339; font-size: 15px;
        margin: 0 auto; width: 190px; 
        top: 40%; position: relative;
    }
    .title span { font-weight: 700; left: -50px; position: absolute; text-align: right; top: 1px; width: 90px; }
    .title img { width: 100%; }
    .btn-wrapper { position: absolute; bottom: 60px; width: 100%; }
    .btn-wrapper .btns{ margin: 30px auto 0; width: 240px; }
    .btn-wrapper .btn { display: block; float: left; width: 116px; }
    .btn-wrapper .btn img { width: 100%; }
    .btnshare { display: block; width: 116px; margin: 0 auto;}
    .btnshare img { width: 100%; }
    .overlay .share { width: 100%; }
    @media all and (max-height: 460px) {
        .title { top: 40%; }
        .btn-wrapper { bottom: 30px; }
    }
    @media all and (max-height: 420px) {
        .title {  top: 46%; }
        .btn-wrapper { bottom: 35px; }
    }
</style>
{% endblock %}

{% block body %}
    <div class='title'>
        <span>{{ app.friend.nick[:10] }}</span>
        <img src='{{ imgsrc("images/friend.png") }}'>
    </div>
    <div class='btn-wrapper'>
        <div class='btns clearfix'>
            <a class='btn' href='{{ urlFor("rule")}}'><img src='{{ imgsrc("images/btnrule-l.png") }}'></a>
            <a class='btn' href='{{ urlFor("index")}}'><img src='{{ imgsrc("images/btnping.png") }}'></a>
        </div>
    </div>
    
{% endblock %}
    
{% block javascripts %}
{#{{ js('js/velocity.ui.min.js') }}#}
<script>
$(function(){
    $('#body').css('height', h + 'px');
    
 });
</script>
{% endblock %}